<script lang="ts" setup>
import xlkTabBar from "../components/tab-bar.vue"
import { useVariableStore } from "@/stores/variable"
const variableStore = useVariableStore()
</script>

<template>
    <umrp-page>
        <umrp-container padding="80px 10px 0" :gap="16"
            bg-color="linear-gradient(to bottom, #1890ff30 0% , #1890ff10 20%, #1890ff10 20%,#fff 100%)">
            <umrp-container direction="horizonal" justify="between" align="center">
                <umrp-space :size="10" align="center">
                    <umrp-avatar></umrp-avatar>
                    <umrp-space direction="vertical" :size="10">
                        <umrp-text>微信昵称</umrp-text>
                        <umrp-text>到期时间：2025-05-21</umrp-text>
                    </umrp-space>
                </umrp-space>
                <umrp-space :size="10">
                    <umrp-text-icon v-state:click="{ memberCode: true }">客服</umrp-text-icon>
                    <umrp-text-icon v-route="'XiaolankaClientSetting'">设置</umrp-text-icon>
                </umrp-space>
            </umrp-container>
            <umrp-card>
                <template #body>
                    <umrp-container padding="10px" :gap="20">
                        <umrp-text bold>我的订单</umrp-text>
                        <umrp-grid :cols="4" v-route="'XiaolankaClientOrderList'">
                            <umrp-grid-item>
                                <umrp-text-icon>全部订单</umrp-text-icon>
                            </umrp-grid-item>
                            <umrp-grid-item>
                                <umrp-text-icon>待付款</umrp-text-icon>
                            </umrp-grid-item>
                            <umrp-grid-item>
                                <umrp-text-icon>待使用</umrp-text-icon>
                            </umrp-grid-item>
                            <umrp-grid-item>
                                <umrp-text-icon>已完成</umrp-text-icon>
                            </umrp-grid-item>
                        </umrp-grid>
                    </umrp-container>
                </template>
            </umrp-card>
            <!-- <umrp-card>
                <template #body>
                    <umrp-container padding="10px" :gap="20">
                        <umrp-text bold>我的功能</umrp-text>
                        <umrp-grid :cols="4">
                            <umrp-grid-item v-state:click="{ memberCode: true }">
                                <umrp-text-icon>会员码</umrp-text-icon>
                            </umrp-grid-item>
                        </umrp-grid>
                    </umrp-container>
                </template>
            </umrp-card> -->
            <umrp-placeholder width="100%" :height="100">
                <umrp-container>
                    <umrp-text>关注公众号</umrp-text>
                    <umrp-text>周周上新提醒</umrp-text>
                    <umrp-text>点击关注</umrp-text>
                </umrp-container>
            </umrp-placeholder>
        </umrp-container>
        <xlk-tab-bar />
        <umrp-modal v-model:visible="variableStore.variable.memberCode" cancel-text="关闭" :ok-button="false">
            <umrp-container :gap="20" align="center">
                <umrp-text align="center" :size="16" bold>客服企业微信</umrp-text>
                <umrp-qrcode :width="150" :height="150"></umrp-qrcode>
            </umrp-container>
        </umrp-modal>
    </umrp-page>
</template>